<template>
  <div class="searchlist">

    <nav>
      <div class="sear">
         <span
         @click="back"
        class="iconfont icon-fanhui"
      >返回</span>
        <input type="text" v-model="searchKey" />
      </div>
      <div class="tabls too">
        <div :class="['li',editId==1?'con':'']" @click="editId=1">全部</div>
        <div :class="['li',editId==2?'con':'']" @click="editId=2">跟团游</div>
        <div :class="['li',editId==3?'con':'']" @click="editId=3">自由行</div>
        <div :class="['li',editId==4?'con':'']" @click="editId=4">周末度假</div>
        <div :class="['li',editId==5?'con':'']" @click="editId=5">邮轮</div>
      </div>
      <div class="tabls_foot">
        <div class="li">推荐</div>
        <div class="li">天数/日期</div>
        <div class="li">途径地区</div>
        <div class="li">筛选</div>
      </div>
    </nav>


       <div class="entry" v-for="item in newDatalists()" :key="item.id">
        <router-link :to="{name:'productdetails',query:{data:item} }" tag="div" class="en-top">
          <div class="img" :style="{'background':'url('+item.logImg[0]+') no-repeat center / cover'}">
           
            <span style="">{{item.category}}</span>
          </div>
          <div class="txt">
            <h2>{{item.title}}</h2>
            <span class="content">{{item.content}}</span>
            <div class="pers">
              <img
                :src="item.img"
                alt=""
              />
              <span>￥<em>{{item.price}}</em>起</span>
            </div>
          </div>
        </router-link>

        <router-link to="/productdetails" tag="div" class="en-bot" v-for="items in item.lists" :key="items.listsId">
          <p>{{items.txt}}</p>
          <span>￥<em>{{items.price}}</em>起</span>
        </router-link> 
       
      </div>
    
  </div>
</template>

<script>
import { getOrderList,datas } from "../api/home";

export default {
  data() {
    return {
      searchKey:'',
      editId:1,
      datalists: [],
    };
  },
  methods: {
    back(){
      this.$router.back()
    },
    getDatas(){
      datas().then(datas=>{
        // console.log(datas);
        this.datalists = datas.Attractions
      })
    },
    getOrderListFun() {
      getOrderList().then(data=>{
        this.datalists = data.data.order
        console.log(this.datalists);
      })
    },
    newDatalists(){
      if (this.editId == 1) {
        return this.datalists;
      } else if (this.editId == 2) {
        return this.datalists.filter((item) => item.category=="跟团游");
      } else if (this.editId == 3) {
        return this.datalists.filter((item) => item.category=="自由行");
      }else if (this.editId == 4) {
        return this.datalists.filter((item) => item.category);
      }else if (this.editId == 5) {
        return this.datalists.filter((item) => item.category=="邮轮");
      }
    }
  },
  watch: {
    searchKey:function(val) {
      if (val=="跟团游") {
        this.editId = 2;
      }else if (val=="自由行") {
        this.editId = 3;
      }else if(val=="邮轮"){
        this.editId = 5;
      }
    },
  },
   created() {

    //  this.getOrderListFun()

     this. getDatas()

    this.editId = this.$route.query.id
  },
};
</script>

<style lang="scss" scoped>
.searchlist {

  background-color: #f5f5f5;
  nav {
    background-color: #fff;
    position: sticky;
    z-index: 5;
    top: 0;
    .sear {
      margin: 0 15px 9px;
      padding-top: 9px;
      height: 32px;
      align-items: center;
      display: flex;
      input {
        width: 70%;
        height: 100%;
        outline: none;
        border: none;
        background-color: #f5f5f5;
        border-radius: 17px;
        text-indent: 1em;
        margin-left: 10px;
      }
      span{
        color: #80d7d1;
        font-size: 14px;
      }
    }
    .tabls,.tabls_foot {
      display: flex;
      justify-content: start;
      .li {
        height: 45px;
        margin: 0 17px;
        font-size: 14px;
        color: #333;
        line-height: 53px;
        border-bottom: 1.5px solid transparent;
        box-sizing: border-box;
      }
      .con {
        font-weight: bold;
        border-bottom: 1.5px solid #ff7d03;
      }
    }
   .tabls_foot{
    .li{
      line-height: 45px;
    }
   }
  }

  .entry {
    margin-top: 10px;
    padding: 9px 15px 0;
    background-color: #fff;
     .en-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 9px;

    .img {
      width: 105px;
      height: 105px;
      position: relative;
      background-position: center;
      span {
        display: block;
        position: absolute;
        border-bottom-right-radius: 3px;
        height: 25.48px;
        padding: 3.5px 8.5px;
        background-color: #3BCDC3;
        color: #fff;
        font-size: 14px;
        top: 0;
        left: 0;
        box-sizing: border-box;
      }
    }
    .txt {
     flex: 1;
     padding-left: 15px;
      color: #333;
      h2 {
        font-weight: normal;
        font-size: 16px;
      }
      span.content {
       
        font-size: 12px;
        color: #999;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 8px;
        word-wrap: break-word;
      }
      .pers {
        display: flex;
        margin-top: 18px;
        justify-content: space-between;
        align-items: center;
        img {
        
          height: 20px;
        }
        span {
          color: #ff5341;
          display: flex;
          font-size: 12px;
          align-items: center;
          em {
            font-style: normal;
            font-weight: bold;
            font-size: 18px;
            margin-right: 3px;
          }
        }
      }
    }
  }
  .en-bot {
    border-top: 0.1px solid #eee;
    padding: 6.5px 0;
    display: flex;
    justify-content: space-between;
    p {
      font-size: 12px;
      margin-right: 60px;
      color: #999;
    }
    span {
      color: #ff5341;
      display: flex;
      font-size: 12px;
      align-items: center;
      em {
        font-style: normal;
        font-weight: bold;
        margin-right: 4px;
        font-size: 16px;
      }
    }
  }
  }
 
}
</style>